<template>
    <div class="order">
        <div class="header">
            <router-link to="/personal" class="iconfont icon-arrowLeft"></router-link>
            <div>我的订单</div>
            <router-link to="">···</router-link>
        </div>
        <div class="nav">
            <router-link @click.native="switchover(index)" v-for="(value,index) in nav" :class="{Color1:true,Color2:index==num}" :to="value.path">{{value.name}}</router-link>
        </div>
        <div  v-show="index==num" v-for="(item,index) in Orders" :key="index" class="content">
            <div v-for="(value,index) in item" class="cont">
                <div class="nav1">
                    <div>
                        <i class="iconfont icon-dianpu"></i>
                        <router-link to="">{{value.view}}<span>&nbsp;&gt;&gt;</span></router-link>
                    </div>
                    <div v-if="is_show==value.chk">交易成功</div>
                    <div v-if="is_show!==value.chk">等待买家付款</div>
                </div>
                <div class="cont_top">
                    <div><img :src="value.img" alt=""></div>
                    <div>
                        <div>
                            <div>{{value.name}}</div>
                            <div>
                                <span>￥{{value.price}}.00</span>
                                <span>x{{value.count}}</span>
                            </div>
                        </div>
                        <div>
                            <span>人气热度：</span>
                            <ul>
                                <li><i class="iconfont icon-wujiaoxing"></i></li>
                                <li><i class="iconfont icon-wujiaoxing"></i></li>
                                <li><i class="iconfont icon-wujiaoxing"></i></li>
                                <li><i class="iconfont icon-wujiaoxing"></i></li>
                                <li><i class="iconfont icon-wujiaoxing"></i></li>
                            </ul>
                        </div>
                        <div>
                            <div>订购日期：</div>
                            <span>{{Date1}}</span>
                        </div>
                        <div>
                            <div>{{value.p1}}</div>
                            <div>{{value.p2}}</div>
                            <div>{{value.p3}}</div>
                        </div>
                    </div>
                </div>
                <div class="cont_center">
                    <div>有效期至：</div>
                    <span>2020-11-30</span>
                </div>
                <div class="cont_bottom">
                    <div :class="{red:value.chk==false,green:value.chk==true}">
                        <i class="iconfont icon-qianbao"></i>
                        <span v-if="is_show==value.chk">已付款</span>
                        <span v-if="is_show!==value.chk">未付款</span>
                    </div>
                    <div>
                        <router-link v-if="is_show==value.chk" @click.native="remove(index)" to="">删除订单</router-link>
                        <router-link v-if="is_show!==value.chk" to="" @click.native="cancel(index)">取消订单</router-link>
                        <router-link v-if="is_show==value.chk" to="" >查看订单</router-link>
                        <router-link v-if="is_show!==value.chk" to="" >再次预定</router-link>
                        <router-link v-if="is_show==value.chk" to="" @click.native="again(index)">再次购买</router-link>
                        <router-link v-if="is_show!==value.chk" to="">立即付款</router-link>
                    </div>
                </div>
            </div>
            <div class="dingdan" v-if="item.length==0">
                <img src="img/dingdan.png" alt="">
            </div>
        </div>

    </div>
</template>
<style lang="less" scoped>
    /* 初始化 */
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style-type: none;
        text-decoration: none;
    }
    //  顶部我的订单
        .header{
            display: flex;
            justify-content: space-between;
            margin: auto;
            font-size: 0.533rem;
            height: 1.4rem;
            align-items: center;
            font-weight: bold;
            border-bottom: 0.027rem solid #ccc;
    >a{
        font-size: 0.666rem;
    }
    }
    //  订单导航
        .nav{
            width: 94%;
            height: 1.333rem;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.426rem;
    >a{
        padding: 0.133rem 0.08rem;
    }
    }
    .Color1{
        color: #000;
    }
    .Color2{
        color: #00CC99;
        border-bottom: 0.08rem solid #00CC99;
    }
    .content{
        width: 98%;
        margin: auto;
        min-height: 560px;
        //  没有对应订单时显示
        >.dingdan{
            height: 13.326rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        >.cont{
            height: 5.33rem;
            display: flex;
            flex-flow: column;
            margin-bottom: 0.267rem;
            >.nav1{
                display: flex;
                justify-content: space-between;
                font-size: 0.373rem;
                height: 0.933rem;
                align-items: center;
                margin: 0;
                >div:nth-child(1){
                    font-size: 16px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    >i{
                        width: 25px;
                    }
                    >a{
                        color: #000;
                        >span{
                            color: #aaa;
                        }
                    }
                }
                >div:nth-child(2){
                    color: red;
                }
            }
            >.cont_top{
                display: flex;
                justify-content: space-between;
                height: 2.665rem;
                >div:nth-child(1){
                    width: 33%;
                    >img{
                        width: 100%;
                        height: 100%;
                        border-radius: 0.267rem;
                    }
                }
                >div:nth-child(2){
                    width: 64%;
                    display: flex;
                    flex-flow: column;
                    justify-content: space-between;
                    >div:nth-child(1){
                        display: flex;
                        font-size: 0.426rem;
                        justify-content: space-evenly;
                        font-weight: bold;
                        >div:first-child{
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            width: 70%;
                            text-align: left;
                        }
                        >div:last-child{
                            display: flex;
                            flex-flow: column;
                            position: relative;
                            >span:nth-child(1){
                                color: red;
                            }
                            >span:nth-child(2){
                                position: absolute;
                                right: 0;
                                bottom: -0.72rem;
                                color: rgba(0,0,0,.6);
                            }
                        }
                    }
                    >div:nth-child(2){
                        display: flex;
                        font-size: 0.373rem;
                        color: #aaa;
                        >ul{
                            display: flex;
                            justify-content: space-evenly;
                            >li{
                                >i{
                                    color: yellow;
                                }
                            }
                        }
                    }
                    >div:nth-child(3){
                        display: flex;
                        color: #aaa;
                        font-size: 14px;
                    }
                    >div:nth-child(4){
                        display: flex;

                        >div{
                            height: 0.533rem;
                            border: 1px dashed #00CC99;
                            color: #00CC99;
                            display: flex;
                            justify-content: center;
                            margin-right: 0.187rem;
                            font-weight: bold;
                            padding: 0 0.08rem;
                        }
                    }
                }
            }
            >.cont_center{
                height: 0.666rem;
                display: flex;
                align-items: flex-end;
                font-size: 0.373rem;
                color: #aaa;
            }
            >.cont_bottom{
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 1.066rem;
                >div:nth-child(1){
                    width: 30%;
                    display: flex;
                    font-size: 0.373rem;
                    align-items: center;
                    >i{
                        margin-right: 2%;
                    }
                }
                >div:nth-child(2){
                    width:63%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    >a{
                        padding: 0.133rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 0.4rem;
                        font-weight: bold;
                        font-size: 0.373rem;
                    }
                    >a:nth-child(1){
                        border :0.027rem solid #aaa;
                        color: #ff3b33;
                    }>a:nth-child(2){
                         border :0.027rem solid #aaa;
                         color: #aaa;
                     }>a:nth-child(3){
                          border :0.027rem solid #aaa;
                          color: #00CC99;
                      }
                }
            }
        }
    }
    .red{
        color: red;
    }
    .green{
        color: #00CC99;
    }
</style>
<script>
    export default {
        data(){
            return {
                //  当前时间
                Date1:"",
                //  订单导航
                nav:[],
                Orders:[this.$store.state.paid.concat(this.$store.state.list),this.$store.state.list,this.$store.state.paid,this.$store.state.Evaluate],
                num:0,
                is_show:true,
                is_hide:true,
            }
        },
        methods:{
            //  切换待出行、已付款...
            switchover(index){
              this.num=index;
          },
            //  删除已付款
            remove(index){
                this.$store.state.paid.forEach((value1, index1) => {
                    if (index1==index) {
                        this.$store.state.paid.splice(index1,1);
                        alert("删除订单成功");
                        this.Orders=[this.$store.state.paid.concat(this.$store.state.list),this.$store.state.list,this.$store.state.paid,this.$store.state.Evaluate]
                    }
                });
                //  已付款本地存储
                localStorage.setItem('paid',JSON.stringify(this.$store.state.paid));
            },
            //  取消订单(未付款)
            cancel(index){
                //  全部订单里取消未付款
                if (this.num==0){
                    this.$store.state.paid.concat(this.$store.state.list).forEach((value1, index1) => {
                        if (index1==index) {
                            this.$store.state.list.splice(index1-this.$store.state.paid.length,1);
                            alert("订单取消成功");
                            this.Orders=[this.$store.state.paid.concat(this.$store.state.list),this.$store.state.list,this.$store.state.paid,this.$store.state.Evaluate]
                        }
                    });
                }
                //  待付款里面取消未付款
                if (this.num==1){
                    this.$store.state.list.forEach((value1, index1) => {
                        if (index1==index) {
                            this.$store.state.list.splice(index1,1);
                            alert("订单取消成功");
                            this.Orders=[this.$store.state.paid.concat(this.$store.state.list),this.$store.state.list,this.$store.state.paid,this.$store.state.Evaluate]
                        }
                    });
                }
                //  购物车本地存储
                localStorage.setItem('list',JSON.stringify(this.$store.state.list));
            },
            //  再次预定(已付款)
            again(index){
                this.$store.state.paid.forEach((value1, index1) => {
                    if (index1==index) {
                        this.$store.commit('xiang1',value1.id);
                        this.$router.push('/details')
                    }
                })
            },
        },
        mounted(){
            this.$axios.get('http://118.178.85.166:3000/shopping').then((data)=>{
                //  全部数据
                let Data=data.data[0];
                //  订单导航
                this.nav=JSON.parse(Data.nav);
            }).catch((err)=>{
                console.log('这是footer.vue中的错误:'+err);
            });
            this.num=this.$store.state.num;
            var now=new Date();
            this.Date1=now.toLocaleDateString().split('/').join('-');

        },

    }
</script>
